<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        [v-cloak] {
            display: none;
        }
    </style>

</head>
<body>

<!--v-cloak是斗篷的意思，加载完app再显示文本-->
<div id="app" v-cloak>
    <h2>{{message}},ok</h2>

</div>

<script src="../js/vue.js"></script>
<script>
    setTimeout(function (){
             const app = new Vue({
            el: '#app',
            data: {
                message: 'hello xw',
                name: 'hello vue',
                movies: ['西游记','红楼梦','水浒传','三国演义'],
                counter: 0,
                url: '<a href="http://www.baidu.com">百度一下</a>'
            },
            methods: {
                add: function () {
                    console.log('add被执行');
                    this.counter++
                },
                sub: function () {
                    console.log('sub被执行');
                    this.counter--
                }
            }
        })
    },1000)


</script>

</body>
</html>